import React, {Component} from 'react';
import {StyleSheet, ScrollView, Text, View, Keyboard, Image, KeyboardAvoidingView, Platform} from 'react-native';
import {Button, Flex, InputItem, List, WingBlank, Toast} from '@ant-design/react-native';
import {getParkingDataInfo} from '~/api/parking';
import {getBuildingMsgChat} from '~/api/message';
import {saveBuildingMsgChat} from '~/api/message';
import {connect} from 'react-redux';
import moment from 'moment';
import Parkpublics from '~/components/process/parkpublics';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};

class Chat extends Component {
    static navigationOptions = {
        title: '咨询车位',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        this.scrollview = null;
        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('id') || 0,
            route: this.props.navigation.getParam('route') || 0,
            CompanyBuildingID: this.props.navigation.getParam('CompanyBuildingID') || 0,
            OwnerDataID: this.props.navigation.getParam('OwnerDataID') || 0,
            parkinfo: [],
            text: '',
            chat: [],
            headTip: false,
            chatTimer: 0,
            url: global.AppData.base_url,
        };
        if (this.state.id !== 0) {
            this.state.headTip = true;
        }
    }

    componentDidMount() {
        if (this.state.id !== 0) {
            this.getparkinfo(this.state.id);
        }
        this.state.chatTimer = setInterval(() => {
            this.getList();
        }, 1000);
        Keyboard.addListener('keyboardDidShow', () => {
            this.toEnd();
        });
    }

    componentWillUnmount() {
        clearInterval(this.state.chatTimer);
    }

    getparkinfo(id) {
        getParkingDataInfo(id).then((r) => {
            if (r.code === 0) {
                this.setState({parkinfo: r.data});
            } else {
                Toast.info(r.msg, 1);
            }
        });
    }

    submit = async () => {
        if (this.state.text === '') {
            Toast.info('内容不能为空', 1);
        } else {
            if (this.state.headTip) {
                this.state.headTip = false;
                const info = this.state.parkinfo;
                await saveBuildingMsgChat({
                    building_id: info.CompanyBuildingID,
                    owner_id: this.state.id !== 0 ? this.props.userinfo.owner : this.state.OwnerDataID,
                    msg: '楼盘： ' + info.BuildingName + ' | 车位：' + info.ParkingName,
                });
            }
            saveBuildingMsgChat({
                building_id: this.state.id !== 0 ? this.state.parkinfo.CompanyBuildingID : this.state.CompanyBuildingID,
                owner_id: this.state.id !== 0 ? this.props.userinfo.owner : this.state.OwnerDataID,
                msg: this.state.text,
            }).then((r) => {
                if (r.code === 0) {
                    this.setState(
                        {
                            text: '',
                        },
                        () => {
                            this.getList();
                            Keyboard.dismiss();
                        },
                    );
                } else {
                    Toast.info(r.msg, 1);
                }
            });
        }
    };

    getList = () => {
        let data = {
            building_id: this.state.id !== 0 ? this.state.parkinfo.CompanyBuildingID : this.state.CompanyBuildingID,
            owner_id: this.state.id !== 0 ? this.props.userinfo.owner : this.state.OwnerDataID,
        };
        getBuildingMsgChat(data).then((r) => {
            if (r.code === 0) {
                if (r.data.length !== this.state.chat.length) {
                    this.setState({chat: r.data}, () => {
                        setTimeout(this.toEnd, 0);
                    });
                    if (this.state.route === 1) {
                        this.props.navigation.state.params.getList();
                    }
                }
            } else {
                Toast.info(r.msg, 1);
            }
        });
    };

    toEnd = () => {
        if (this.scrollview != null) {
            this.scrollview.scrollToEnd({animated: true});
        }
    };

    setContent = (text) => {
        this.setState({text});
    };

    renderInput = () => (
        <Flex style={{width: '100%'}} justify={'around'}>
            <List style={{width: '70%'}}>
                <InputItem placeholder="请输入内容" onChange={this.setContent} value={this.state.text} />
            </List>
            <Button
                onPress={() => {
                    this.submit();
                }}
                type={'warning'}>
                提交
            </Button>
        </Flex>
    );

    render() {
        return (
            <View style={{width: '100%', height: '100%'}}>
                <ScrollView ref={(ref) => (this.scrollview = ref)} style={{marginBottom: 1}}>
                    {this.state.id !== 0 ? <Parkpublics parkinginfo={this.state.parkinfo} /> : null}
                    <WingBlank>
                        <View>
                            {this.state.chat.map((item) => {
                                return (
                                    <>
                                        {item.FromTabID !== this.props.userinfo.identity ? (
                                            <Flex direction="row" align={'start'} justify={'start'} style={{marginTop: '5%'}}>
                                                {item.FromUserLogo === '' ? (
                                                    <Image
                                                        style={{width: 50, height: 50, borderRadius: 40}}
                                                        source={require('~/assets/my/nantou.png')}
                                                    />
                                                ) : (
                                                    <Image
                                                        style={{width: 50, height: 50, borderRadius: 40, marginLeft: 10}}
                                                        source={{uri: this.state.url + item.FromUserLogo}}
                                                    />
                                                )}
                                                <Flex wrap={'wrap'} style={styles.yzstyles} align="start">
                                                    <Flex wrap="wrap" style={{width: '100%'}} align="start">
                                                        <Text style={{fontSize: 12, color: '#FFFFFF', paddingLeft: 10, paddingTop: 5}}>
                                                            {item.Message}
                                                        </Text>
                                                    </Flex>
                                                    <Flex align={'end'} direction="row" justify={'end'} wrap="wrap" style={{width: '100%'}}>
                                                        <Text style={{color: '#FFFFFF', fontSize: 10, paddingRight: 10, paddingBottom: 5}}>
                                                            {moment(item.FromDateTime).format('YYYY.MM.DD HH:mm')}
                                                        </Text>
                                                    </Flex>
                                                </Flex>
                                            </Flex>
                                        ) : (
                                            <Flex direction="row" align={'end'} justify={'end'}>
                                                <Flex direction="column" style={styles.yzstyle}>
                                                    <Flex wrap="wrap" style={{width: '100%'}} align="start">
                                                        <Text style={{fontSize: 12, paddingLeft: 10, paddingTop: 5}}>{item.Message}</Text>
                                                    </Flex>
                                                    <Flex align={'end'} direction="row" justify={'end'} wrap="wrap" style={{width: '100%'}}>
                                                        <Text style={{color: '#666666', fontSize: 10, paddingRight: 10, paddingBottom: 5}}>
                                                            {moment(item.FromDateTime).format('YYYY.MM.DD HH:mm')}
                                                        </Text>
                                                    </Flex>
                                                    {/* {item.FromUserLogo === ''
                                                        ?
                                                        <Image style={{width: 50, height: 50, borderRadius: 40}} source={require('~/assets/my/nantou.png')} />
                                                        :
                                                        <Image style={{ width: 50, height: 50, marginTop: 10, borderRadius: 40, marginLeft: 10 }} source={{ uri: this.state.url + this.props.userinfo.logo }} />
                                                    } */}
                                                </Flex>
                                                {item.FromUserLogo === '' ? (
                                                    <Image
                                                        style={{width: 50, height: 50, borderRadius: 40}}
                                                        source={require('~/assets/my/nantou.png')}
                                                    />
                                                ) : (
                                                    <Image
                                                        style={{width: 50, height: 50, marginTop: 10, borderRadius: 40, marginLeft: 10}}
                                                        source={{uri: this.state.url + item.FromUserLogo}}
                                                    />
                                                )}
                                            </Flex>
                                        )}
                                    </>
                                );
                            })}
                        </View>
                    </WingBlank>
                </ScrollView>
                {Platform.OS === 'ios' ? (
                    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={64}>
                        {this.renderInput()}
                    </KeyboardAvoidingView>
                ) : (
                    this.renderInput()
                )}
            </View>
        );
    }
}
export default connect(mapGetter)(Chat);
const styles = StyleSheet.create({
    wingblank: {
        marginTop: 10,
        paddingTop: '2%',
        paddingBottom: '2%',
        borderWidth: 0.3,
        paddingLeft: '1%',
        paddingRight: '1%',
    },
    flextext: {
        paddingBottom: '1%',
    },
    circle: {
        height: 50,
        width: 50,
        marginLeft: 10,
        marginTop: 5,
        backgroundColor: 'blue',
        borderRadius: 25,
    },
    sjstyle: {
        width: '60%',
        marginLeft: '3%',
        borderWidth: 0.3,
        marginBottom: '2%',
    },
    yzstyle: {
        width: '60%',
        backgroundColor: '#FFFFFF',
        borderRadius: 25,
        marginLeft: '3%',
        marginBottom: 5,
    },
    yzstyles: {
        width: '60%',
        backgroundColor: '#FF811C',
        borderRadius: 25,
        marginLeft: '3%',
        marginTop: 5,
    },
});
